<template>
	<view>
		<view>
			<view class="block__content" style="font-size: 35rpx;">
				商品描述：
			</view>
			<view class="block__content">
				<u--textarea
					v-model="goods.content"
					placeholder="商品描述"
				></u--textarea>
			</view>
		</view>
		<view class="content">
			<view class="block__content" style="font-size: 35rpx;">
				上传图片：
			</view>
			<view class="block__content" style="background-color: #fff;">
				<u-upload
				    :fileList="fileList"
				    @afterRead="afterRead"
				    @delete="deletePic"
					@oversize="overSize"
					accept="media"
					size-type="compressed"
					:max-size="3 * 1024 *1024"
				    multiple
				    :maxCount="10"
				></u-upload>
			</view>
		</view>
		<view class="types content">
			<view class="flex block__content">
				<view class="block__content" style="font-size: 35rpx;">
					金额：
				</view>
				<view @click="showKeyboard">
					<u-input type="digit" color="red" disabled="true" v-model="goods.price" placeholder="0.00"></u-input>	
				</view>
			</view>
		</view>
		<view class="block__button">
			<u-button type="primary" size="min" @click="submit">发布</u-button>
		</view>

		<u-popup
			:show="show"
			mode="bottom" 
		>
			<view>
				<view class="u-keyboard">
					<u-keyboard
						:dotDisabled="keyData.dotDisabled"
						show="true"
						@close="close"
						@cancel="close"
						@change="change"
						@confirm="confirm"
						@backspace="backspace"
					>
					<view class="flex">
						<view class="block__content" style="font-size: 35rpx;">
							预算：
						</view>
						<u-icon name="rmb" color="red" size="28"></u-icon>
						<u-input type="digit" color="red" font-size="28" disabled="true"
							v-model="input" placeholder="0.00" @input="checkNum" ></u-input>
					</view>
					</u-keyboard>
				</view> 
			</view>
		</u-popup>	
	</view>
</template>

<script>
	import {pushCreateGoods} from '@/api/push.js'
	export default {
		data() {
			return {
				show: false,
				input:"",
				fileList: [],
				goods:{
					price: "",
					content: '',
					imgs:"",
				},
				localUrl:this.$Cache.get('localUrl'),
				keyData: {
					mode: '',
					dotDisabled: false,
					random: false,
				},
			}
		},
		methods: {
			// 删除图片
			deletePic(event) {
				this[`fileList`].splice(event.index, 1)
			},
			overSize(event){
				uni.showToast({
					title: "上传素材不能大于1M",
					icon: 'none',
					duration: 2000
				});
			},
			// 新增图片
			async afterRead(event) {
				let that = this;
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList`].length
				
				lists.map((item) => {
					this[`fileList`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.$util.uploadFilePromise(lists[0].url)
					let item = this[`fileList`][fileListLen]
					this[`fileList`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '上传成功',
						url: this.localUrl+result.data
					}))
					fileListLen++
				}
			},
			submit() {
				let that = this;
				let files = [];
				let imgs = that.fileList.map(item=>{return item.url});
				that.goods.imgs = JSON.stringify(imgs);
				uni.showLoading({
					title: '发布中'
				});
				pushCreateGoods(this.goods).then(res=>{
					if(res.code == '00'){
						uni.hideLoading();
						uni.showToast({
							title: "发布成功",
							icon: 'success',
							duration: 2000
						});
						that.goods.content = "";
						that.goods.price = "";
						that.goods.imgs = "";
						that.fileList = [];
					}
				}).catch(res => {
					uni.hideLoading();
				});
				
				
				console.log(this.goods);
			},
			checkNum(number) {
				//正则表达试
				number = (number.match(/^\d*(\.?\d{0,2})/g)[0]) || '0.00'
				//重新赋值给input
				this.$nextTick(() => {
					this.input = number
				})
			},
			close() {
				this.show = false
			},
			toDecimal(x) {
				var f = parseFloat(x);
				
				if (isNaN(f)) {
					return false;
				}
				var f = Math.round(x * 100) / 100;
				var s = f.toString();
				var rs = s.indexOf(".");
				if (rs < 0) {
					rs = s.length;
					s += ".";
				}
				while (s.length <= rs + 2) {
					s += "0";
				}
				return s;
			},
			confirm(){
				this.show = false;
				if(!this.input){
					this.goods.price = '0.00';
				}else{
					this.goods.price = this.toDecimal(this.input);
				}
			},
			backspace(){
				this.input = this.input.substring(0, this.input.length - 1);
			},
			change(e) {
				this.input += e
				this.checkNum(this.input);
			},
			showKeyboard(){
				this.show = true;
			},
			
		}
	}
</script>

<style scoped lang="scss">
	.block__title{
		font-size: 35rpx;
		margin-top: 5px;
	}
	.block__button{
		padding: 20rpx;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
	.content {
		margin: 10rpx;
	}
	.block__content{
		padding: 10rpx;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}
	.types{
		background-color: #fff;
		border-radius: 14rpx;
		padding: 30rpx 16rpx;
		position: relative;
		z-index: 11;
		background-color: #fff;
		position: relative;
	}
</style>
